<!DOCTYPE html>
<html>
    <head>

    </head>

    <body>
        <div id="app">
            <div>
                科目：<input type="text" placeholder="请输入科目" v-model="subject">
                分数：<input type="text" placeholder="请输入分数" v-model="score">
                <button @click="add">添加</button>
            </div>

            <div>
                <ul>
                    <li>
                        <span><strong>编号</strong></span>
                        <span><strong>科目</strong></span>
                        <span><strong>成绩</strong></span>
                        <span><strong>操作</strong></span>
                    </li>
                    <li v-for="(item, index) in list" :key="item.id">
                        <span>{{index + 1 }}</span>
                        <span>{{item.subject}}</span>
                        <span>{{item.score}}</span>
                        <button @click="del(item.id)">删除</button>
                    </li>
                </ul>
            </div>

            <div>
                <span>总分：{{total}}</span>
                <span>平均分：{{avg}}</span>
            </div>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

        <script>
            const app = new Vue({
                el:"#app",
                data:{
                    subject:'',
                    score: 0,
                    list: [
                        {id: 1, subject: "语文", score: 80},
                        {id: 2, subject: "数学", score: 81},
                        {id: 3, subject: "英语", score: 82}
                    ]
                },
                computed: {
                    total(){
                        console.log(this.list)
                        return this.list.reduce((sum, item) => sum + item.score,0);
                    },
                    avg(){
                        return this.total/this.list.length;
                    }
                },
                methods:{
                    add(){
                        this.list.push({
                            id: +new Date,
                            subject: this.subject,
                            score: this.score
                        })
                    },
                    del(id){
                        this.list = this.list.filter(item => item.id !== id)
                    }
                }
            })
        </script>
    </body>
</html>